<template>
  <div class="split-pane-wrapper" id="myDiv" ref="myDiv" @mousemove="mouseMoveTrigger">
    <div class="pane-left" ref="myDiv1" :style="{ width: leftOffset_left + 'px' }">
     <SshLinkInfo2 :tree-data="dataSource"></SshLinkInfo2>
    </div>
    <div class="pane-trigger-con" @mousedown="mouseDownTrigger"></div>
    <div class="pane-center" ref="myDiv2" :style="{ width: leftOffset_right + 'px' }">
      JavaScript
    </div>
  </div>
</template>
<script setup lang="ts">
import { Ref } from 'vue';
import { onMounted, toRefs } from 'vue';
import { computed, inject, ref, unref, watchEffect, reactive } from 'vue'
import SshLinkInfo2 from "@/components/list/SshLinkInfo5.vue"
const xian = ref(0);
const min_width: number = 50;
const leftOffset_left = ref(0);
const leftOffset_right = ref(0);
const triggerDragging = ref(false);
const myDiv = ref();
const myDiv1 = ref<HTMLElement>();
const myDiv2 = ref<HTMLElement>();
const leftMargin: Ref<number> = ref(0);

let open: ['Users'];
let admins: [
  ['Management', 'mdi-account-multiple-outline'],
  ['Settings', 'mdi-cog-outline'],
];
let cruds: [
  ['Create', 'mdi-plus-outline'],
  ['Read', 'mdi-file-outline'],
  ['Update', 'mdi-update'],
  ['Delete', 'mdi-delete'],
];
interface Tree {
  id:number,
	label: string;
  icon: string;
	children?: Tree[];
}
const dataSource = ref<Tree[]>([
  {
    id: 1,
    label: 'Level one 1',
    icon: "el-icon-success",
    children: [
      {
        id: 4,
        label: 'Level two 1-1',
        icon: "el-icon-success",
        children: [
          {
            id: 9,
            icon: "el-icon-success",
            label: 'Level three 1-1-1',
          },
          {
            id: 10,
            icon: "el-icon-success",
            label: 'Level three 1-1-2',
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: 'Level one 2',
    icon: "el-icon-success",
    children: [
      {
        id: 5,
        icon: "el-icon-success",
        label: 'Level two 2-1',
      },
      {
        id: 6,
        icon: "el-icon-success",
        label: 'Level two 2-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    icon: "el-icon-success",
    children: [
      {
        id: 7,
        icon: "el-icon-success",
        label: 'Level two 3-1',
      },
      {
        id: 8,
        icon: "el-icon-success",
        label: 'Level two 3-2',
      },
    ],
  },
])
let items: [
        {
          title: 'Item #1',
          value: 1,
          props: {
            prependIcon: 'mdi-home',
          },
        },
        {
          title: 'Item #2',
          value: 2,
          props: {
            appendIcon: 'mdi-close',
          },
        },
        {
          title: 'Item #3',
          value: 3,
          props: {
            color: 'primary',
          },
        },
      ];
//当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件移动一个像素，就会发生一次 mousemove
function mouseMoveTrigger(event: MouseEvent) {
  if (myDiv1.value && myDiv2.value && myDiv.value) {
    const width = myDiv.value.offsetWidth;
    const width1 = myDiv1.value.offsetWidth;
    const width2 = myDiv2.value.offsetWidth;
    if (xian.value == 1 && triggerDragging.value) {
      if (myDiv.value && myDiv1.value && myDiv2.value) {
        let left_div_width: number = event.clientX - leftMargin.value;
        let right_div_width: number = width - (event.clientX - leftMargin.value);
        console.log('left_div_width.value: ' + left_div_width + '  right_div_width.value: ' + right_div_width);
        if (left_div_width < min_width) {
          leftOffset_left.value = min_width;
          leftOffset_right.value = width - min_width;
        }
        if (right_div_width < min_width) {
          leftOffset_left.value = width - min_width;
          leftOffset_right.value = min_width;
        }
        if (left_div_width > min_width && right_div_width > min_width) {
          leftOffset_left.value = left_div_width;
          leftOffset_right.value = right_div_width;
        }
        //leftOffset_left.value = event.clientX - leftMargin.value;
        //leftOffset_right.value = width - (event.clientX - leftMargin.value);
        console.log('leftOffset_left.value: ' + leftOffset_left.value + '  leftOffset_right.value: ' + leftOffset_right.value);
      }

    }
    if (!event.which) {
      triggerDragging.value = false;
    }
  }
};
//用户按下鼠标按钮
function mouseDownTrigger(event: MouseEvent) {
  xian.value = 1;
  triggerDragging.value = true;
};
onMounted(() => {
  // 确保DOM已经渲染完成
  if (myDiv.value) {
    //leftMargin.value = Number(myDiv.value.offse);
    leftMargin.value = Number(document.getElementById("myDiv")?.getBoundingClientRect().left);
    const width: number = Number(myDiv.value.offsetWidth);
    let left_with: number = Number(width * 0.2)
    if (left_with > 150) {
      leftOffset_left.value = 150;
      leftOffset_right.value = width - 150;
    } else if (left_with <= 150 || left_with >= 50) {
      leftOffset_left.value = left_with;
      leftOffset_right.value = width - left_with;
    } else {
      leftOffset_left.value = min_width;
      leftOffset_right.value = width - min_width;
    }
    console.log('myDiv宽度：', width);
    console.log('leftOffset_left.value宽度：', leftOffset_left.value);
    console.log('leftOffset_right.value宽度：', leftOffset_right.value);
  }
});

</script>
<style scoped>
.split-pane-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}

.pane-left {
  background: rgb(146, 122, 122);
}

.pane-center {
  flex: 1;
  background: rgb(74, 75, 74);
}

.pane-trigger-con {
  width: 2px;
  background: rgb(100, 100, 100);
  cursor: ew-resize;
}
</style>
